<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:c="livcos.org/ns/cosmos"
  xmlns:job="livcos.org/ns/process/job"
  xmlns:u="livcos.org/ns/cosmos/update"
  xmlns="http://www.w3.org/1999/xhtml"
  exclude-result-prefixes="c job u">
  
  <xsl:output method="html"/>
  
  <xsl:variable name="url">
    <xsl:apply-templates select="/*/c:request/c:url"/>
  </xsl:variable>
  <xsl:variable name="start" select="/*/state[@type = 'INITIAL']/@time"/>
  
  <xsl:template match="/">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
          body {
          background-color: #DDFFDD;
          font-size: 80%;
          font-family: Verdana;
          }
          
          a {
          text-decoration: none;
          }
        </style>
        <script type="text/javascript">
          <xsl:comment>
            function Timer(startTime, autoReloadTime) {
            this.i = autoReloadTime;
            this.startTime = startTime;
            this.manual = document.getElementById("manual");
            this.auto = document.getElementById("auto");
            this.time = document.getElementById("time");
            this.duration = document.getElementById("duration");
            }
            
            Timer.prototype.showDuration = function() {
            var d = new Date((new Date()) - this.startTime);
            this.duration.innerHTML = d.toLocaleTimeString();
            }
            
            Timer.prototype.tick = function() {
            this.showDuration();
            if (this.i <xsl:text disable-output-escaping="yes">></xsl:text>= 0) {
            this.auto.style.display = "inline";
            if (this.i <xsl:text disable-output-escaping="yes">></xsl:text> 0) {
            this.time.innerHTML = this.i;
            this.i = this.i-1;
            }
            else {
            this.i = -1;
            this.manual.style.display = "none";
            this.auto.innerHTML = "Reloading...";
            window.container.location.replace(window.container.location);
            }
            }
            }
            
            Timer.prototype.start = function() {
            this.showDuration();
            var self = this;
            this.tId = window.setInterval(function() {
            self.tick();
            }, 1000);
            }
            
            Timer.prototype.stopAuto = function() {
            this.i = -1;
            this.auto.style.display = "none";
            }
            
            Timer.prototype.stop = function() {
            window.clearInterval(this.tId);
            }
            
            window.onload = function() {
            window.container = this;
            var autoReloadTime = 2;
            var startTime = new Date(<xsl:value-of select="substring($start, 1, 4)"/>
            <xsl:text>,</xsl:text>
            <xsl:value-of select="substring($start, 6, 2)"/>
            <xsl:text>-1,</xsl:text>
            <xsl:value-of select="substring($start, 9, 2)"/>
            <xsl:text>,</xsl:text>
            <xsl:value-of select="substring($start, 12, 2)"/>
            <xsl:text>+1,</xsl:text>
            <xsl:value-of select="substring($start, 15, 2)"/>
            <xsl:text>,</xsl:text>
            <xsl:value-of select="substring($start, 18, 2)"/>);
            this.timer = new Timer(startTime, autoReloadTime);
            this.timer.start();
            }
            
            window.onunload = function() {
            this.timer.stop();
            }
          </xsl:comment>
        </script>
      </head>
      <body>
        <xsl:apply-templates select="*"/>
        <p>&#160;</p>
      </body>
    </html>
  </xsl:template>
  
  <xsl:template match="/*">
    <form method="POST" id="reload"><input type="hidden" name="_job" value="{local-name(.)}"/></form>
    <h1>Job Status</h1>
    <p>Request: <xsl:value-of select="c:request/access/@uri"/></p>
    <p>Definition: <xsl:value-of select="c:request/access/@obj"/></p>
    <p>
      <xsl:text>Start at </xsl:text>
      <xsl:value-of select="substring($start, 12, 8)"/> (<span id="duration">00:00:00</span>
      <xsl:text> ago). </xsl:text>
    </p>
    <p>
      <a id="manual" href="javascript:window.container.location.replace('{$url}')">Reload</a>
      <span id="auto" style="display: none"> (Auto-Reload in <span id="time">.</span>
        <xsl:text>s... [</xsl:text><a href="javascript:timer.stopAuto()">stop</a>
        <xsl:text>])</xsl:text>
      </span>
    </p>
    <xsl:apply-templates select="job:*"/>
    <xsl:apply-templates select="state[last()]"/>
  </xsl:template>
  
  <xsl:template match="job:*">
    <p>
      <xsl:value-of select="local-name(.)"/>
      <xsl:if test="@state"> [<xsl:value-of select="@state"/>]</xsl:if>
    </p>
  </xsl:template>
  
  <xsl:template match="state">
    <p>
      <xsl:text>Status: </xsl:text>
      <xsl:value-of select="@type"/>
      <xsl:text> (</xsl:text>
      <xsl:value-of select="round(@freeMemory div 1024 div 1024)"/>
      <xsl:text>MB free of </xsl:text>
      <xsl:value-of select="round(@totalMemory div 1024 div 1024)"/>
      <xsl:text>MB)</xsl:text>
    </p>
  </xsl:template>
  
</xsl:stylesheet>
